<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-18 11:15:54
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
import { Bullet } from "@antv/g2plot";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  // 组件名称
  name: "demo",
  // 组件状态值
  setup() {
    const root = ref(null);
    let plot = null;

    let data_bullet = ref([]);
    const loadData = async () => {
      data_bullet.value = [
        {
          title: "满意度",
          ranges: [100],
          measures: [80],
          target: 85,
        },
      ];
    };

    const initChart = () => {
      plot = new Bullet(root.value, {
        data: data_bullet.value,
        measureField: "measures",
        rangeField: "ranges",
        targetField: "target",
        xField: "title",
        color: {
          range: "#f0efff",
          measure: "#5B8FF9",
          target: "#3D76DD",
        },
        xAxis: {
          line: null,
        },
        yAxis: {
          tickMethod: ({ max }) => {
            const interval = Math.ceil(max / 5);
            // 自定义刻度 ticks
            return [0, interval, interval * 2, interval * 3, interval * 4, max];
          },
        },
        // 自定义 legend
        legend: {
          custom: true,
          position: "bottom",
          items: [
            {
              value: "实际值",
              name: "实际值",
              marker: { symbol: "square", style: { fill: "#5B8FF9", r: 5 } },
            },
            {
              value: "目标值",
              name: "目标值",
              marker: { symbol: "line", style: { stroke: "#3D76DD", r: 5 } },
            },
          ],
        },
      });
      plot.render();
    };
    onMounted(async () => {
      await loadData();
      initChart();
    });

    onUnmounted(() => {
      if (plot != null) {
        plot.destroy();
      }
    });

    return {
      root,
    };
  },
};
</script>
<style scoped>
</style>
